---
id: 61adc91467b5d59328b9f781
title: Schritt 79
challengeType: 0
dashedName: step-79
---

# --description--

Im letzten Projekt hast du ein wenig über Ränder und die `border-color`-Eigenschaft gelernt.

Alle HTML-Elemente haben Ränder, obwohl sie normalerweise auf `none` eingestellt sind. Mit CSS kannst du alle Aspekte des Randes eines Elements steuern und den Rand auf allen Seiten oder nur auf einer Seite gleichzeitig festlegen. Damit ein Rand sichtbar wird, musst du seine Breite und seinen Stil einstellen.

Füge in die `.sleeve`-CSS-Regel die `border-left-width`-Eigenschaft mit dem Wert `10px` hinzu.

# --hints--

Deine `.sleeve`-CSS-Regel sollte eine `border-left-width`-Eigenschaft mit dem Wert `10px` enthalten.

```js
assert(new __helpers.CSSHelp(document).getStyle('.sleeve')?.borderLeftWidth === '10px');
```

# --seed--

## --seed-contents--

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Colored Markers</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <h1>CSS Color Markers</h1>
    <div class="container">
      <div class="marker red">
        <div class="cap"></div>
        <div class="sleeve"></div>
      </div>
      <div class="marker green">
      </div>
      <div class="marker blue">
      </div>
    </div>
  </body>
</html>
```

```css
h1 {
  text-align: center;
}

.container {
  background-color: rgb(255, 255, 255);
  padding: 10px 0;
}

.marker {
  width: 200px;
  height: 25px;
  margin: 10px auto;
}

.cap {
  width: 60px;
  height: 25px;
}

--fcc-editable-region--
.sleeve {
  width: 110px;
  height: 25px;
  background-color: rgba(255, 255, 255, 0.5);
}
--fcc-editable-region--

.cap, .sleeve {
  display: inline-block;
}

.red {
  background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27));
}

.green {
  background: linear-gradient(#55680D, #71F53E, #116C31);
}

.blue {
  background: linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%), hsl(240, 56%, 42%));
}

```
